<template>
    <div>
        <el-card>
            <div class="searchRow">
                <div class="searchParams"><span class="spanWidth">学员ID:</span>
                    <el-input size="small" class="inputWidth" clearable v-model="query.uid"
                              @input="inputSearch"></el-input>
                </div>
                <div class="searchParams"><span class="spanWidth">姓名 :</span>
                    <el-input size="small" class="inputWidth" clearable v-model="query.name"
                              @input="inputSearch"></el-input>
                </div>
                <div class="searchParams"><span class="spanWidth">手机号码 :</span>
                    <el-input size="small" class="inputWidth" clearable v-model="query.phone"
                              @input="inputSearch"></el-input>
                </div>
                <div class="searchParams"><span class="spanWidth">证件类型 :</span>
                    <el-select
                            size="small"
                            class="inputWidth"
                            v-model="query.card_type"
                            placeholder="请选择证件类型"
                            @change="search"
                            clearable
                    >
                        <el-option
                                v-for="item in cardOptions"
                                :key="item.id"
                                :label="item.name"
                                :value="item.id"
                        ></el-option>
                    </el-select>
                </div>
                <!--        <div class="searchParams"><span class="spanWidth">姓拼音 :</span>-->
                <!--          <el-input class="inputWidth" clearable v-model="query.last_py"-->
                <!--                    @input="inputSearch"></el-input>-->
                <!--        </div>-->
                <!--        <div class="searchParams"><span class="spanWidth">名拼音 :</span>-->
                <!--          <el-input class="inputWidth" clearable v-model="query.first_py"-->
                <!--                    @input="inputSearch"></el-input>-->
                <!--        </div>-->
            </div>
<!--            <div class="searchRow">-->
                <!--        <div class="searchParams"><span class="spanWidth">出生日期 :</span>-->
                <!--          <el-date-picker-->
                <!--                  value-format="yyyy-MM-dd"-->
                <!--                  v-model="query.birthday"-->
                <!--                  @change="search"-->
                <!--                  type="date"-->
                <!--                  placeholder="Pick a day"-->
                <!--                  :size="'small'"-->
                <!--          />-->
                <!--&lt;!&ndash;          <el-date-picker&ndash;&gt;-->
                <!--&lt;!&ndash;                  class="inputWidth"&ndash;&gt;-->
                <!--&lt;!&ndash;                  format="yyyy 年 MM 月 dd 日"&ndash;&gt;-->
                <!--&lt;!&ndash;                  value-format="yyyy-MM-dd"&ndash;&gt;-->
                <!--&lt;!&ndash;                  placeholder="选择日期"&ndash;&gt;-->
                <!--&lt;!&ndash;                  v-model="query.birthday"&ndash;&gt;-->
                <!--&lt;!&ndash;                  @change="search"&ndash;&gt;-->
                <!--&lt;!&ndash;          ></el-date-picker>&ndash;&gt;-->
                <!--        </div>-->
                <!--        <div class="searchParams"><span class="spanWidth">电子邮箱 :</span>-->
                <!--          <el-input size="small" class="inputWidth" clearable v-model="query.email"-->
                <!--                    @input="inputSearch"></el-input>-->
                <!--        </div>-->
<!--            </div>-->
<!--            <div class="searchRow">-->
                <!--        <div class="searchParams"><span class="spanWidth">毕业年份 :</span>-->
                <!--          <el-date-picker-->
                <!--                  type="month"-->
                <!--                  class="inputWidth"-->
                <!--                  @change="search"-->
                <!--                  format="yyyy 年 MM 月"-->
                <!--                  value-format="yyyy-MM-dd"-->
                <!--                  placeholder="选择日期"-->
                <!--                  v-model="query.grad_time"-->

                <!--          ></el-date-picker>-->
                <!--        </div>-->
                <!--        <div class="searchParams"><span class="spanWidth">最高学历 :</span>-->
                <!--          <el-select-->
                <!--                  v-model="query.hig_edu"-->
                <!--                  placeholder="最高学历"-->
                <!--                  @change="search"-->
                <!--                  class="inputWidth"-->
                <!--                  clearable-->
                <!--          >-->
                <!--            <el-option label="研究生及以上" value="研究生及以上"></el-option>-->
                <!--            <el-option label="本科" value="本科"></el-option>-->
                <!--            <el-option label="专科" value="专科"></el-option>-->
                <!--            <el-option label="其他" value="其他"></el-option>-->
                <!--            <el-option label="研究生及以上（在读）" value="研究生及以上（在读）"></el-option>-->
                <!--            <el-option label="本科（在读）" value="本科（在读）"></el-option>-->
                <!--            <el-option label="专科（在读）" value="专科（在读）"></el-option>-->
                <!--            <el-option label="其他（在读）" value="其他（在读）"></el-option>-->
                <!--          </el-select>-->
                <!--        </div>-->
                <!--        <div class="searchParams"><span class="spanWidth">相关专业 :</span>-->
                <!--          <el-select-->
                <!--                  v-model="query.major"-->
                <!--                  placeholder="相关专业"-->
                <!--                  @change="search"-->
                <!--                  clearable-->
                <!--                  class="inputWidth"-->
                <!--          >-->
                <!--            <el-option label="人力资源管理" value="人力资源管理"></el-option>-->
                <!--            <el-option label="工商管理" value="工商管理"></el-option>-->
                <!--            <el-option label="行政管理" value="行政管理"></el-option>-->
                <!--            <el-option label="会计" value="会计"></el-option>-->
                <!--            <el-option label="财政、税务" value="财政、税务"></el-option>-->
                <!--            <el-option label="财政管理" value="财政管理"></el-option>-->
                <!--            <el-option label="其他" value="其他"></el-option>-->
                <!--          </el-select>-->
                <!--        </div>-->

<!--            </div>-->
            <div class="searchRow">
                <div class="searchParams"><span class="spanWidth">工作区域(省) :</span>
                    <el-input size="small" class="inputWidth" clearable v-model="query.province"
                              @input="inputSearch"></el-input>
                </div>
                <div class="searchParams"><span class="spanWidth">工作区域(市) :</span>
                    <el-input size="small" class="inputWidth" clearable v-model="query.city"
                              @input="inputSearch"></el-input>
                </div>
                <div class="searchParams"><span class="spanWidth">工作区域(区) :</span>
                    <el-input size="small" class="inputWidth" clearable v-model="query.region"
                              @input="inputSearch"></el-input>
                </div>
                <div class="searchParams"><span class="spanWidth">证件号码 :</span>
                    <el-input size="small" class="inputWidth" clearable v-model="query.card_id"
                              @input="inputSearch"></el-input>
                </div>
            </div>
            <!--      <div class="searchRow">-->
            <!--        <div class="searchParams"><span class="spanWidth">单位类型 :</span>-->
            <!--          <el-select-->
            <!--                  style="width: 320px; margin-right: 20px"-->
            <!--                  v-model="query.com_type"-->
            <!--                  placeholder="请选择单位类型"-->
            <!--                  @change="search"-->
            <!--                  clearable-->
            <!--          >-->
            <!--            <el-option-->
            <!--                    v-for="item in com_typeList"-->
            <!--                    :key="item.value"-->
            <!--                    :label="item.name"-->
            <!--                    :value="item.value"-->
            <!--            ></el-option>-->
            <!--          </el-select>-->
            <!--        </div>-->
            <!--        <div class="searchParams"><span class="spanWidth">行业类型 :</span>-->
            <!--          <el-select-->
            <!--                  v-model="query.ind_type"-->
            <!--                  placeholder="请选择行业类型"-->
            <!--                  @change="search"-->
            <!--                  clearable-->
            <!--          >-->
            <!--            <el-option-->
            <!--                    v-for="item in ind_typeList"-->
            <!--                    :key="item.value"-->
            <!--                    :label="item.name"-->
            <!--                    :value="item.value"-->
            <!--            >-->
            <!--            </el-option>-->
            <!--          </el-select>-->
            <!--        </div>-->
            <!--        <div class="searchParams"><span class="spanWidth">单位名称 :</span>-->
            <!--          <el-input size="small" style="width: 300px" clearable v-model="query.com_name"-->
            <!--                    @input="inputSearch"></el-input>-->
            <!--        </div>-->
            <!--      </div>-->
            <!--      <div class="searchRow">-->
            <!--        <div class="searchParams"><span>从事薪酬管理（含薪税服务）工作年限（含实习经历） :</span>-->
            <!--          <el-col :span="8">-->
            <!--            <el-input-->
            <!--                    oninput="value=value.replace(/[^0-9.]/g,'')"-->
            <!--                    type="number"-->
            <!--                    v-model="query.work_age"-->
            <!--                    @input="inputSearch"-->
            <!--                    clearable-->
            <!--            ></el-input>-->
            <!--          </el-col>-->
            <!--        </div>-->
            <!--      </div>-->
            <!--      <div class="searchRow">-->
            <!--        <div class="searchParams"><span class="spanWidth">职务 :</span>-->
            <!--          <el-select-->
            <!--                  style="width: 420px"-->
            <!--                  v-model="query.work_duty"-->
            <!--                  placeholder="请选择职务"-->
            <!--                  @change="search"-->
            <!--                  clearable-->
            <!--          >-->
            <!--            <el-option-->
            <!--                    v-for="item in work_dutyList"-->
            <!--                    :key="item.value"-->
            <!--                    :label="item.name"-->
            <!--                    :value="item.value"-->
            <!--            >-->
            <!--            </el-option>-->
            <!--          </el-select>-->
            <!--        </div>-->
            <!--        <div class="searchParams"><span style="width: 120px">相关资质或证书 :</span>-->
            <!--          <el-select-->
            <!--                  style="width: 380px;"-->
            <!--                  v-model="query.cert"-->
            <!--                  placeholder="请选择"-->
            <!--                  @change="search"-->
            <!--                  clearable-->
            <!--          >-->
            <!--            <el-option-->
            <!--                    v-for="item in certDisplayOptions"-->
            <!--                    :key="item.id"-->
            <!--                    :label="item.name"-->
            <!--                    :value="item.id"-->
            <!--            >-->
            <!--            </el-option>-->
            <!--          </el-select>-->
            <!--        </div>-->
            <!--      </div>-->
            <!--      <div class="searchRow" v-show="$store.state.user_type == 3">-->
            <!--        <div class="searchParams"><span class="spanWidth">报名机构 :</span>-->
            <!--          <el-select-->
            <!--                  v-model="query.org"-->
            <!--                  placeholder="请选择单位类型"-->
            <!--                  @change="search"-->
            <!--                  clearable-->
            <!--          >-->
            <!--            <el-option-->
            <!--                    v-for="item in orgList"-->
            <!--                    :key="item.id"-->
            <!--                    :label="item.org_name"-->
            <!--                    :value="item.org_code"-->
            <!--            ></el-option>-->
            <!--          </el-select>-->
            <!--        </div>-->
            <!--        <div class="searchParams"><span class="spanWidth">报考机构 :</span>-->
            <!--          <el-select-->
            <!--                  v-model="query.exam_org"-->
            <!--                  placeholder="请选择单位类型"-->
            <!--                  @change="search"-->
            <!--                  clearable-->
            <!--          >-->
            <!--            <el-option-->
            <!--                    v-for="item in orgList"-->
            <!--                    :key="item.id"-->
            <!--                    :label="item.org_name"-->
            <!--                    :value="item.org_code"-->
            <!--            ></el-option>-->
            <!--          </el-select>-->
            <!--        </div>-->
            <!--        <div class="searchParams"><span class="spanWidth">补考次数:</span>-->
            <!--          <el-col :span="8">-->
            <!--            <el-input-->
            <!--                    oninput="value=value.replace(/[^0-9.]/g,'')"-->
            <!--                    type="number"-->
            <!--                    v-model="query.exam_count"-->
            <!--                    @change="search"-->
            <!--            ></el-input>-->
            <!--          </el-col>-->
            <!--        </div>-->
            <!--      </div>-->
            <!--      <div class="searchRow">-->


            <!--        &lt;!&ndash;        <div class="searchParams"><span>合同签署 :</span>&ndash;&gt;-->
            <!--        &lt;!&ndash;          &ndash;&gt;-->
            <!--        &lt;!&ndash;        </div>&ndash;&gt;-->
            <!--      </div>-->
            <!--      <div class="searchRow">-->

            <!--        <div class="searchParams"><span class="spanWidth">准考证号 :</span>-->
            <!--          <el-input class="inputWidth" clearable v-model="query.exam_code"-->
            <!--                    @input="inputSearch"></el-input>-->
            <!--        </div>-->
            <!--        <div class="searchParams"><span class="spanWidth">确认书编号 :</span>-->
            <!--          <el-input class="inputWidth" clearable v-model="query.contract_id"-->
            <!--                    @input="inputSearch"></el-input>-->
            <!--        </div>-->
            <!--      </div>-->
<!--            <div class="searchRow">-->
                <!--        <div class="searchParams"><span class="spanWidth">考试城市 :</span>-->
                <!--          <el-select class="inputWidth" clearable v-model="query.exam_city" placeholder="请选择"-->
                <!--                     @change="search">-->
                <!--            <el-option-->
                <!--                    v-for="item in examCityOptions"-->
                <!--                    :key="item.id"-->
                <!--                    :label="item.exam_city"-->
                <!--                    :value="item.exam_city">-->
                <!--            </el-option>-->
                <!--          </el-select>-->
                <!--        </div>-->
                <!--        <div class="searchParams"><span class="spanWidth">考试时间 :</span>-->
                <!--          <el-select class="inputWidth" clearable v-model="query.exam_date" placeholder="请选择"-->
                <!--                     @change="search">-->
                <!--            <el-option-->
                <!--                    v-for="item in examDateOptions"-->
                <!--                    :key="item.id"-->
                <!--                    :label="item.exam_date"-->
                <!--                    :value="item.exam_date">-->
                <!--            </el-option>-->
                <!--          </el-select>-->
                <!--        </div>-->
<!--            </div>-->
            <!--      <el-row class="searchRow">-->

            <!--        <div class="block" style="margin-left: 40px">-->
            <!--          <span style="font-size: 14px;margin-right: 10px;">考试日期 :</span>-->
            <!--          <el-date-picker-->
            <!--                  v-model="query.exam_date_range"-->
            <!--                  @change="search"-->
            <!--                  type="daterange"-->
            <!--                  format="yyyy 年 MM 月 dd 日"-->
            <!--                  value-format="yyyy-MM-dd"-->
            <!--                  align="right"-->
            <!--                  unlink-panels-->
            <!--                  range-separator="至"-->
            <!--                  start-placeholder="开始日期"-->
            <!--                  end-placeholder="结束日期"-->
            <!--                  :picker-options="pickerOptions">-->
            <!--          </el-date-picker>-->
            <!--        </div>-->
            <!--        <div class="block" style="margin-left: 40px">-->
            <!--          <span style="font-size: 14px;margin-right: 10px">激活日期 :</span>-->
            <!--          <el-date-picker-->
            <!--                  v-model="query.active_date_range"-->
            <!--                  @change="search"-->
            <!--                  type="datetimerange"-->
            <!--                  format="yyyy 年 MM 月 dd 日"-->
            <!--                  value-format="yyyy-MM-dd hh:mm:ss"-->
            <!--                  :picker-options="pickerOptions"-->
            <!--                  range-separator="至"-->
            <!--                  start-placeholder="开始日期"-->
            <!--                  end-placeholder="结束日期"-->
            <!--                  align="right">-->
            <!--          </el-date-picker>-->
            <!--        </div>-->
            <!--      </el-row>-->
            <div class="searchRow">
                <div class="searchParams"><span class="spanWidth">科目名称 :</span>
                    <el-select size="small" class="inputWidth" clearable v-model="query.course" placeholder="请选择"
                               @change="search">
                        <el-option
                                v-for="item in course"
                                :key="item.id"
                                :label="item.name"
                                :value="item.id">
                        </el-option>
                    </el-select>
                </div>
                <div class="searchParams"><span class="spanWidth">审核进度 :</span>
                    <el-cascader
                            placeholder="请选择审核进度"
                            style="width:100%;"
                            size="small"
                            v-model="state"
                            @change="stateChange"
                            :options="stateOptions"
                            clearable></el-cascader>
                    <!--                                                                        {{stateStr}}-->
                </div>
                <div style="display:flex;align-items: center">
                    <div class="searchParams"><span class="spanWidth">审核时间 :</span></div>
                    <el-date-picker
                            v-model="query.add_time_range"
                            format="YYYY年MM月DD日"
                            value-format="YYYY-MM-DD"
                            @change="search"
                            size="small"
                            type="datetimerange"
                            :picker-options="pickerOptions"
                            range-separator="至"
                            start-placeholder="开始日期"
                            end-placeholder="结束日期"
                            align="right">
                    </el-date-picker>
                </div>
                <!--        <div class="searchParams"><span class="spanWidth">审核日期 :</span>-->
                <!--          <el-cascader-->
                <!--                  @change="stateTimeChange"-->
                <!--                  v-model="state"-->
                <!--                  :options="stateTimeOptions"-->
                <!--                  clearable></el-cascader>-->
                <!--&lt;!&ndash;          <el-date-picker&ndash;&gt;-->
                <!--&lt;!&ndash;                  size="small"&ndash;&gt;-->
                <!--&lt;!&ndash;                  class="inputWidth"&ndash;&gt;-->
                <!--&lt;!&ndash;                  format="yyyy 年 MM 月 dd 日"&ndash;&gt;-->
                <!--&lt;!&ndash;                  value-format="yyyy-MM-dd"&ndash;&gt;-->
                <!--&lt;!&ndash;                  placeholder="选择日期"&ndash;&gt;-->
                <!--&lt;!&ndash;                  v-model="query.audit_date"&ndash;&gt;-->
                <!--&lt;!&ndash;                  @change="search"&ndash;&gt;-->
                <!--&lt;!&ndash;          ></el-date-picker>&ndash;&gt;-->
                <!--        </div>-->
                <!--        <div class="searchParams"><span class="spanWidth">备注 :</span>-->
                <!--          <el-input size="small" style="width: 300px" clearable v-model="query.note"-->
                <!--                    @input="inputSearch"></el-input>-->
                <!--        </div>-->
            </div>

            <el-row class="searchRow">
                <el-col>
                    <!--                    <el-button type="primary" size="small" icon="el-icon-search" @click="search">搜索</el-button>-->
                    <!--                    <el-button type="primary" size="small" @click="downDataVisible = true">导出<i-->
                    <!--                            class="el-icon-upload el-icon--right"></i></el-button>-->
                    <div style="margin: 10px 0px">
                        <el-button type="primary" size="small" @click="downDataVisible = true">导出<i
                                class="el-icon-upload el-icon--right"></i></el-button>
                        <el-button size="small" @click="reset">重置</el-button>
                    </div>
                </el-col>
                <el-dialog
                        title="导出数据"
                        width="50%"
                        v-model="downDataVisible"
                >
                    <div style="margin: 15px 0;"></div>
                    <div class="checkboxDiv" style="text-align: left">
                        <el-checkbox :indeterminate="isIndeterminate" style="margin-right: 20px" v-model="checkAll"
                                     @change="handleCheckAllChange">全选
                        </el-checkbox>
                        <!--            <el-checkbox v-if="$store.state.user_type == 3" @change="handleCheckAppAllChange">App选中</el-checkbox>-->
                        <div style="margin: 10px 0;display: flex;flex-wrap: wrap;justify-content: space-between"></div>
                        <el-checkbox-group style="line-height: 20px" v-model="checkedCities"
                                           @change="handleCheckedCitiesChange">
                            <el-checkbox style="width: 150px;text-align: left" v-for="item in cities" :label="item"
                                         :key="item">{{cityOptionsText[item]}}
                            </el-checkbox>
                        </el-checkbox-group>
                    </div>
                    <div style="margin-top: 40px">
                        <el-button @click="downDataVisible = false">取消</el-button>
                        <el-button type="primary" :disabled="checkedCities.length > 0 ? false:true" @click="downData">确认
                        </el-button>
                    </div>
                </el-dialog>
            </el-row>
        </el-card>
    </div>
</template>

<script>
    import {formatDate} from "../../utils/formatDate";

    const cityOptions = [
        'user',
        'card_type_display',
        'gender',
        'course',
        'org',
        // 'exam_org',
        'name',
        'birthday',
        'card_id',
        'phone',
        'email',
        'province',
        'city',
        'region',
        'add_time',
        'active_date'
        // 'address',
        // 'com_name',
        // 'grad_time',
        // 'hig_edu',
        // 'work_age',
        // 'work_duty',
        // 'active_date',
        // 'exp_date',
        // 'exam_date',
        // 'train_account',
        // 'train_password',
        // 'exam_code',
        // 'note'
    ];
    const appOptions = [
        'org',
        'user',
        'name',
        'gender_display',
        'province',
        'city',
        'region',
        'train_account',
        'train_password',
        'course',
        'exp_date',
        'note',
        'add_time',
        'active_date'
    ];
    import {examDate, org_list} from "../../request/api";

    let children = [
        {
            value: formatDate(new Date(new Date().getTime() - 24 * 60 * 60 * 1000), 'yyyy-MM-dd'),
            label: '昨天',
        },
        {
            value: formatDate(new Date(), 'yyyy-MM-dd'),
            label: '今天',
        },
        {
            value: formatDate(new Date(new Date().getTime() + 24 * 60 * 60 * 1000), 'yyyy-MM-dd'),
            label: '明天',
        }
    ];
    export default {
        name: "Search",
        props: {
            course: {
                type: Array
            },
            examTime: {
                type: Array
            }
        },
        data() {
            return {
                pickerOptions: {
                    shortcuts: [{
                        text: '最近一周',
                        onClick(picker) {
                            const end = new Date();
                            const start = new Date();
                            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
                            picker.$emit('pick', [start, end]);
                        }
                    }, {
                        text: '最近一个月',
                        onClick(picker) {
                            const end = new Date();
                            const start = new Date();
                            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
                            picker.$emit('pick', [start, end]);
                        }
                    }, {
                        text: '最近三个月',
                        onClick(picker) {
                            const end = new Date();
                            const start = new Date();
                            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
                            picker.$emit('pick', [start, end]);
                        }
                    }]
                },
                stateTimeOptions: [
                    {
                        value: 'org',
                        label: '机构一审',
                        children: [{
                            value: 'org_reject_1',
                            label: '驳回',
                            children: children
                        }, {
                            value: 'org_pass_1',
                            label: '通过',
                            children: children
                        }]
                    },
                    {
                        value: 'org',
                        label: '机构二审',
                        children: [{
                            value: 'org_reject_2',
                            label: '驳回',
                            children: children
                        }, {
                            value: 'org_pass_2',
                            label: '通过',
                            children: children
                        }]
                    },
                    {
                        value: 'admin',
                        label: '总部一审',
                        children: [{
                            value: 'admin_reject_1',
                            label: '驳回',
                            children: children
                        }, {
                            value: 'admin_pass_1',
                            label: '通过',
                            children: children
                        }]
                    },
                    {
                        value: 'admin',
                        label: '总部二审',
                        children: [{
                            value: 'org_reject_2',
                            label: '驳回',
                            children: children
                        }, {
                            value: 'admin_pass_2',
                            label: '待审',
                            children: children
                        }]
                    }
                ],
                cityOptionsText: {
                    'card_type_display': '证件类型',
                    'user': '用户名',
                    'gender': '性别',
                    'course': '科目',
                    'org': '培训机构',
                    'exam_org': '报考机构',
                    'name': '姓名',
                    'birthday': '出生日期',
                    'card_id': '证件号码',
                    'phone': '手机号码',
                    'email': '邮箱',
                    'province': '省份',
                    'city': '城市',
                    'region': '区(县)',
                    'address': '现居住址',
                    'com_name': '单位名称',
                    'grad_time': '毕业时间',
                    'hig_edu': '最高学历',
                    'work_age': '从业年限',
                    'work_duty': '职务',
                    'active_date': '总部一审时间',
                    'exp_date': '到期时间',
                    'exam_date': '考试时间',
                    'train_account': '学习账户',
                    'train_password': '学习密码',
                    'exam_code': '准考证号',
                    'add_time': '机构一审时间',
                    'note': '备注'
                },
                checkAll: false,
                checkedCities: [],
                cities: cityOptions,
                isIndeterminate: true,
                orgList: [],
                certDisplayOptions: [
                    {id: 1, name: 'ACCA职业资格证书'},
                    {id: 2, name: 'AICPA职业资格证书'},
                    {id: 3, name: 'ATHE国际薪税师能力水平评价证书二级（中级）'},
                    {id: 4, name: 'ATHE国际薪税师能力水平评价证书三级（初级）'},
                    {id: 5, name: 'CIMA职业资格证书'},
                    {id: 6, name: 'CMA职业资格证书'},
                    {id: 7, name: 'IFA职业资格证书'},
                    {id: 8, name: 'IFA国际薪税师能力水平评价证书二级（中级）'},
                    {id: 9, name: 'IFA国际薪税师能力水平评价证书三级（初级）'},
                    {id: 10, name: '初级会计师职称证书'},
                    {id: 11, name: '初级经济师职称证书'},
                    {id: 12, name: '法律职业资格证书'},
                    {id: 13, name: '高级会计师职称证书'},
                    {id: 14, name: '高级经济师职称证书'},
                    {id: 15, name: '企业人力资源管理师职业技能（一级）证书'},
                    {id: 16, name: '企业人力资源管理师职业技能（二级）证书'},
                    {id: 17, name: '企业人力资源管理师职业技能（三级）证书'},
                    {id: 18, name: '企业人力资源管理师职业技能（四级）证书'},
                    {id: 19, name: '企业人力资源管理师职业资格（一级）证书'},
                    {id: 20, name: '企业人力资源管理师职业资格（二级）证书'},
                    {id: 21, name: '企业人力资源管理师职业资格（三级）证书'},
                    {id: 22, name: '企业人力资源管理师职业资格（四级）证书'},
                    {id: 23, name: '税务师职业资格证书'},
                    {id: 24, name: '薪酬管理职业技能（初级）证书'},
                    {id: 25, name: '薪酬管理职业技能（中级）证书'},
                    {id: 26, name: '薪酬管理职业技能（高级）证书'},
                    {id: 27, name: '薪税师职业技能（一级）证书'},
                    {id: 28, name: '薪税师职业技能（二级）证书'},
                    {id: 29, name: '薪税师职业技能（三级）证书'},
                    {id: 30, name: '薪税师职业技能（四级）证书'},
                    {id: 31, name: '中国商业联合会薪税师能力水平评价证书二级（中级）'},
                    {id: 32, name: '中国商业联合会薪税师能力水平评价证书三级（初级）'},
                    {id: 33, name: '中级会计师职称证书'},
                    {id: 34, name: '中级经济师职称证书'},
                    {id: 35, name: '注册会计师职业资格证书'},
                    {id: 0, name: '以上均无'}
                ],
                work_dutyList: [
                    {
                        name: "单位负责人/高级管理人员（董事长/总裁/副总裁等）",
                        value:
                            "单位负责人/高级管理人员（董事长/总裁/副总裁等）#Person in charge / Senior Management (Chairman / President / Vice President, etc.)",
                    },
                    {
                        name: "事务所负责人/高级管理人员（董事长/权益合伙人/授薪合伙人等）",
                        value:
                            "事务所负责人/高级管理人员（董事长/权益合伙人/授薪合伙人等）#Head of the firm / Senior Management (Chairman / Equity Partners / Salaried Partners, etc.)",
                    },
                    {
                        name: "人力资源部（薪酬总监岗及以上/薪税服务总监岗及以上）",
                        value:
                            "人力资源部（薪酬总监岗及以上/薪税服务总监岗及以上）#Human Resources Dept. (Payments Director Post and above/Payments and Tax Service Director Post and above)",
                    },
                    {
                        name: "财务部（总监岗及以上）",
                        value:
                            "财务部（总监岗及以上）#Finance Dept. (Director Post and above)",
                    },
                    {
                        name: "客服部/市场部（总监岗及以上）",
                        value:
                            "客服部/市场部（总监岗及以上）#Customer Service Dept. / Marketing Dept. (Director Post and above)",
                    },
                    {
                        name: "业务部（总监岗及以上）",
                        value:
                            "业务部（总监岗及以上）#Business Dept. (Director Post and above)",
                    },
                    {
                        name: "其他未列明部门（总监岗及以上）",
                        value:
                            "其他未列明部门（总监岗及以上）#Other Unspecified Departments (Director Post and above)",
                    },
                    {
                        name: "人力资源部（薪酬经理岗/薪税服务经理岗）",
                        value:
                            "人力资源部（薪酬经理岗/薪税服务经理岗）#Human Resources Dept. (Payments Manager Post/Payments and Tax Service Manager Post)",
                    },
                    {
                        name: "财务部（经理岗）",
                        value:
                            "财务部（经理岗）#Finance Dept. (Manager Post)",
                    },
                    {
                        name: "客服部/市场部（经理岗）",
                        value:
                            "客服部/市场部（经理岗）#Customer Service Dept. / Marketing Dept.  (Manager Post)",
                    },
                    {
                        name: "业务部（经理岗）",
                        value:
                            "业务部（经理岗）#Business Dept. (Manager Post)",
                    },
                    {
                        name: "其他未列明部门（经理岗）",
                        value:
                            "其他未列明部门（经理岗）#Other Unspecified Departments (Manager Post)",
                    },
                    {
                        name: "人力资源部（薪酬专员岗/薪税服务专员岗）",
                        value:
                            "人力资源部（薪酬专员岗/薪税服务专员岗）#Human Resources Dept. (Payments Specialist Post/Payments and Tax Service Specialist Post)",
                    },
                    {
                        name: "财务部（专员岗）",
                        value:
                            "财务部（专员岗）#Finance Dept. (Specialist Post)",
                    },
                    {
                        name: "客服部/市场部（专员岗",
                        value:
                            "客服部/市场部（专员岗）#Customer Service Dept. / Marketing Dept.  (Specialist Post)",
                    },
                    {
                        name: "业务部（专员岗）",
                        value:
                            "业务部（专员岗）#Business Dept. (Specialist Post)",
                    },
                    {
                        name: "其他未列明部门（专员岗）",
                        value:
                            "其他未列明部门（专员岗）#Other Unspecified Departments (Specialist Post)",
                    },
                    {
                        name: "其他人员（在校学生-人力资源管理、工商管理、行政管理专业）",
                        value:
                            " 其他人员（在校学生-人力资源管理、工商管理、行政管理专业）#Others (Student-Major in HR Management, Business Administration, Administration）",
                    },
                    {
                        name: "其他人员（在校学生-会计、税务、财务管理专业）",
                        value:
                            "其他人员（在校学生-会计、税务、财务管理专业）#Others (Student-Major in Accounting, Taxation, Financial management）",
                    },
                    {
                        name: "其他人员（在校学生-其他专业）",
                        value:
                            "其他人员（在校学生-其他专业）#Others (Student-other majors）",
                    },
                    {
                        name: "自由职业者",
                        value:
                            "自由职业者#Freelancers",
                    }
                ],
                ind_typeList: [
                    {value: 1, name: '人力资源与人力资本服务'},
                    {value: 2, name: '集成电路'},
                    {value: 3, name: '人工智能'},
                    {value: 4, name: '软件与平台'},
                    {value: 5, name: '生命科学'},
                    {value: 6, name: '生物医药'},
                    {value: 7, name: '医疗保健'},
                    {value: 8, name: '航空与航天'},
                    {value: 9, name: '汽车'},
                    {value: 10, name: '化工'},
                    {value: 11, name: '工业产品和服务'},
                    {value: 12, name: '消费品'},
                    {value: 13, name: '能源和自然资源'},
                    {value: 14, name: '金融'},
                    {value: 15, name: '基础建设和建筑产品'},
                    {value: 16, name: '机械和设备'},
                    {value: 17, name: '媒体'},
                    {value: 18, name: '金属和矿业'},
                    {value: 19, name: '私募基金'},
                    {value: 20, name: '零售'},
                    {value: 21, name: '高科技'},
                    {value: 22, name: '电信'},
                    {value: 23, name: '公用事业'},
                    {value: 24, name: '教育'},
                    {value: 25, name: '文化'},
                    {value: 26, name: '其他'},
                    {value: 27, name: '无'}
                ],
                cardOptions: [
                    {id: 1, name: "居民身份证"},
                    {id: 2, name: "护照"},
                    {id: 3, name: "港澳台胞身份证"},
                ],
                com_typeList: [
                    {value: 1, name: '企事业单位'},
                    {value: 2, name: '人力资源服务机构'},
                    {value: 3, name: '会计（税务、律师）事务所'},
                    {value: 4, name: '金融机构（银行、证券、保险、 信托、基金等）'},
                    {value: 5, name: '其他中介机构'},
                    {value: 6, name: '院校'},
                    {value: 7, name: '其他'}
                ],
                pickerOptions: {
                    shortcuts: [{
                        text: '最近一周',
                        onClick(picker) {
                            const end = new Date();
                            const start = new Date();
                            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
                            picker.$emit('pick', [start, end]);
                        }
                    }, {
                        text: '最近一个月',
                        onClick(picker) {
                            const end = new Date();
                            const start = new Date();
                            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
                            picker.$emit('pick', [start, end]);
                        }
                    }, {
                        text: '最近三个月',
                        onClick(picker) {
                            const end = new Date();
                            const start = new Date();
                            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
                            picker.$emit('pick', [start, end]);
                        }
                    }]
                },
                arrParams: [],
                downOptions: [],
                downDataVisible: false,
                queryCopy: null,
                state: null,
                watchState: null,
                stateOptions: [
                    {
                        value: '<3',
                        label: '机构一审',
                        children: [
                            {
                                value: '<3',
                                label: "待审"
                            },
                            {
                                value: '>2',
                                label: "已审"
                            },
                            // {
                            //     value: '<3',
                            //     label: "拒审"
                            // }
                        ]
                    },
                    // {
                    //   value: '3<n<7',
                    //   label: '机构二审',
                    //   children: [
                    //     {
                    //       value: '3<n<7',
                    //       label: "待审"
                    //     },
                    //     {
                    //       value: '>6',
                    //       label: "已审"
                    //     },
                    //     // {
                    //     //     value: '3<n<7',
                    //     //     label: "拒审"
                    //     // }
                    //   ]
                    // },
                    {
                        value: '=3',
                        label: '总部一审',
                        children: [
                            {
                                value: '=3',
                                label: "待审"
                            },
                            {
                                value: '>3',
                                label: "已审"
                            },
                            // {
                            //     value: '=3',
                            //     label: "拒审"
                            // }
                        ]
                    },
                    // {
                    //   value: '=7',
                    //   label: '总部二审',
                    //   children: [
                    //     {
                    //       value: '=7',
                    //       label: "待审"
                    //     },
                    //     {
                    //       value: '=8',
                    //       label: "已审"
                    //     },
                    //     // {
                    //     //     value: '=7',
                    //     //     label: "拒审"
                    //     // }
                    //   ]
                    // }
                ],
                examCityOptions: [],
                examDateOptions: [],
                query: {
                    phone: '',
                    name: '',
                    exam_city: '',
                    exam_date: '',
                    course: '',
                    exam_date_range: null,
                    active_date_range: null,
                    last_py: '',
                    first_py: '',
                    uid: '',
                    email: '',
                    card_id: '',
                    birthday: null,
                    card_type: '',
                    grad_time: null,
                    hig_edu: '',
                    major: '',
                    province: '',
                    city: '',
                    region: '',
                    org: '',
                    exam_org: '',
                    com_type: '',
                    ind_type: '',
                    com_name: '',
                    work_duty: '',
                    cert: '',
                    work_age: 0,
                    exam_count: 0,
                    contract_id: '',
                    exam_code: '',
                    note: '',
                    audit_date: null,
                    audit_method: null,
                    add_time_range: null
                },
                timer: null
            }
        },
        methods: {
            handleCheckAllChange(val) {
                this.checkedCities = val ? cityOptions : [];
                this.isIndeterminate = false;
            },
            handleCheckAppAllChange(val) {
                this.checkedCities = val ? appOptions : [];
            },
            handleCheckedCitiesChange(value) {
                let checkedCount = value.length;
                this.checkAll = checkedCount === this.cities.length;
                this.isIndeterminate = checkedCount > 0 && checkedCount < this.cities.length;
            },
            //获取机构列表
            getOrgList() {
                if (this.$store.state.user_type == 3) {
                    org_list().then(res => {
                        this.orgList = [...res]
                    })
                }
            },
            inputSearch() {
                clearTimeout(this.timer);
                this.timer = setTimeout(() => {
                    this.search();
                }, 500)

            },
            getExamDate() {
                // examDate(this.query.course).then(res => {
                //   let examCityOption = res.filter((item, index) => {
                //     return res.findIndex(item1 => item1.exam_city == item.exam_city) == index
                //   })
                //   let examDateOption = res.filter((item, index) => {
                //     return res.findIndex(item1 => item1.exam_date == item.exam_date) == index
                //   })
                //   this.examDateOptions = examDateOption
                //   this.examCityOptions = examCityOption
                // })
            },
            downData() {
                console.log(this.arrParams, this.checkedCities)
                this.$emit('downData', this.arrParams, this.checkedCities)
            },
            stateChange() {
                if (!this.state) {
                    console.log('重新加载');
                    this.state = null;
                    this.watchState = null;
                    this.reset();
                }
            },
            stateTimeChange(value) {
                this.query.audit_method = value[1];
                this.query.audit_date = value[2];
                this.search();
            },
            search() {
                // console.log('this.query',this.query)
                // console.log('this.queryCopy',this.queryCopy)
                this.arrParams = [];
                for (let item in this.query) {
                    if (this.queryCopy[item] != this.query[item]) {
                        let obj = {};
                        obj[item] = this.query[item];
                        this.arrParams.push(obj);
                        console.log('arrParams', JSON.parse(JSON.stringify(this.arrParams)))
                    }
                }
                ;

                console.log('arrParams', this.arrParams)
                this.$emit('searchParams', this.arrParams);
            },
            reset() {
                this.state = null;
                this.query = {};
                this.$emit('reset');
            }
        },
        watch: {
            state() {
                // this.watchState = this.state[length];
                // console.log('this.watchState',this.watchState)
                // console.log('this.stateStr',this.stateStr);
                if (this.state != null) {
                    let arr = [];
                    for (let item of this.state) {
                        arr.push(item)
                    }
                    this.watchState = arr[length];
                }
            },
            stateStr() {
                console.log('this.stateStr', this.stateStr)
                // this.query = JSON.parse(JSON.stringify(this.queryCopy));
                console.log('this.query 第一次', this.query);
                for (let item in this.query) {
                    if (item.includes('state')) {
                        delete this.query[item]
                    }
                }
                let state = JSON.parse(this.stateStr);
                if (Array.isArray(state)) {
                    for (let item of state) {
                        for (let key in item) {
                            this.query[key] = item[key]
                        }
                    }
                } else {
                    for (let key in state) {
                        this.query[key] = state[key]
                    }
                }
                this.search();
            }
        },
        computed: {
            stateStr() {
                switch (this.watchState) {
                    case '<3':
                        return '{"state_lt":"3"}';
                    case '>2':
                        return '{"state_gt":"2"}';
                    case '3<n<7':
                        return '[{"state_gt":"3"},{"state_lt":"7"}]';
                    case '>6':
                        return '{"state_gt":"6"}';
                    case '=3':
                        return '{"state":"3"}';
                    case '>3':
                        return '{"state_gt":"3"}';
                    case '=7':
                        return '{"state":"7"}';
                    case '=8':
                        return '{"state":"8"}';
                }
                return null;
            }
        },
        created() {
            console.log('用户类型', this.$store.state.user_type)
            this.queryCopy = JSON.parse(JSON.stringify(this.query));
            this.getExamDate();
            this.getOrgList();
        }
    }
</script>

<style scoped>
    .checkboxDiv .el-checkbox {
        margin-right: unset;
    }

    .box-child {
        width: 130px;
    }

    .searchParams {
        display: flex;
        align-items: center;
        text-align: right;
        font-size: 14px;
    }

    .searchParams span {
        margin-right: 10px;
    }

    .inputWidth {
        width: 200px;
    }

    .spanWidth {
        width: 100px;
    }

    .searchRow {
        display: flex;
        margin-bottom: 10px;
    }
</style>
